<!-- ProfileEdit.vue -->
<template>
  <div class="profile-edit">
    <div class="card">
      <div class="card-header">
        <h3>编辑个人资料</h3>
      </div>

      <div class="form-container">
        <div class="form-group">
          <label>用户名</label>
          <input type="text" v-model="user.username" :readonly="!isEditing">
        </div>

        <div class="form-group">
          <label>邮箱</label>
          <input type="email" v-model="user.email" :readonly="!isEditing">
        </div>

        <div class="form-group">
          <label>手机号</label>
          <input type="text" v-model="user.phone" :readonly="!isEditing">
        </div>

        <div class="form-group">
          <label>个人简介</label>
          <textarea v-model="user.bio" :readonly="!isEditing"></textarea>
        </div>

        <div class="form-actions">
          <!-- 编辑按钮 - 只在非编辑状态显示 -->
          <button
              v-if="!isEditing"
              class="btn-edit"
              @click="enterEditMode"
          >
            编辑
          </button>

          <!-- 保存和取消按钮 - 只在编辑状态显示 -->
          <div v-else class="edit-buttons">
            <button class="btn-save" @click="submitForm">保存</button>
            <button class="btn-cancel" @click="cancelEdit">取消</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfileEdit',
  data() {
    return {
      isEditing: false, // 控制编辑状态
      originalUser: null, // 存储原始数据用于取消操作
      user: {
        uid: null,
        username: '',
        email: '',
        phone: '',
        bio: ''
      }
    }
  },
  created() {
    this.loadUserProfile(); // 组件创建时加载用户数据
  },
  methods: {
    // 加载用户资料
    async loadUserProfile() {
      try {
        // 从localStorage获取当前用户ID
        const storedUser = localStorage.getItem('user');
        const uid = storedUser ? JSON.parse(storedUser).uid : null;

        console.log('uid:'+uid);
        if (uid) {
          // 改为 GET 请求，参数放在 URL 中
          const response = await this.$axios.get('/api/percenter/getProfile', {
            params: { uid } // 作为查询参数传递
          });
          // 检查响应结构并更新用户数据
          if (response.data && response.data.data) {
            const profile = response.data.data;
            this.user = {
              uid: profile.uid,
              username: profile.username,
              email: profile.email,
              phone: profile.phone,
              bio: profile.bio
            };
          }
        }
      } catch (error) {
        console.error('加载用户资料失败:', error);
        this.$message.error('加载用户资料失败');
      }
    },

    // 进入编辑模式
    enterEditMode() {
      // 备份当前数据
      this.originalUser = JSON.parse(JSON.stringify(this.user));
      this.isEditing = true;
    },

    // 取消编辑
    cancelEdit() {
      // 恢复原始数据
      this.user = JSON.parse(JSON.stringify(this.originalUser));
      this.isEditing = false;
    },

    // 提交表单
    async submitForm() {
      try {
        // 提交更新到后端
        await this.$axios.put('/api/percenter/putProfile', this.user);

        this.$message.success('资料更新成功');
        this.isEditing = false; // 退出编辑模式

        // 更新localStorage中的用户信息
        const storedUser = localStorage.getItem('user');
        if (storedUser) {
          const userData = JSON.parse(storedUser);
          userData.username = this.user.username;
          localStorage.setItem('user', JSON.stringify(userData));
        }
      } catch (error) {
        console.error('保存失败:', error);
        this.$message.error('保存失败');
      }
    }
  }
}
</script>

<style scoped>
.profile-edit {
  padding: 20px;
}

.form-container {
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #607d8b;
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 15px;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

/* 只读状态的样式 */
.form-group input:read-only,
.form-group textarea:read-only {
  background-color: #f5f5f5;
  color: #757575;
  cursor: not-allowed;
}

.form-group textarea {
  height: 100px;
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
}

/* 编辑按钮样式 */
.btn-edit {
  padding: 10px 20px;
  background-color: #1976d2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 编辑状态下的按钮容器 */
.edit-buttons {
  display: flex;
  gap: 10px;
}

/* 保存按钮样式 */
.btn-save {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* 取消按钮样式 */
.btn-cancel {
  padding: 10px 20px;
  background-color: #f44336;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>